<!DOCTYPE html>
<html lang="en">
<head>
	<title></title>
	<meta charset="utf-8">
	<link class="admin-icon" rel="shortcut icon" type="image/x-icon">
	<meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
	      name="viewport"/>
	<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
	<link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet">

	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
	<script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
	<script src="/sa-resources/admin-util.js"></script>
	<script src="/res/sa.js"></script>
	<style>
		.box-card {
			margin-bottom: 1rem;
		}

		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}

		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}

		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			line-height: 178px;
			text-align: center;
		}

		.avatar {
			width: 178px;
			height: 178px;
			display: block;
		}
	</style>
</head>
<body>
<div class="vue-box">
	<el-card class="box-card">
		<p>原始上传</p>
		<form action="/uploadfile" enctype="multipart/form-data" id="normalForm" method="post">
			<input name="file" type="file" value="upload">
			<input @click="normalSubmit()" type="button" value="do it!">
		</form>
	</el-card>
	<el-card class="box-card">
		<p>elment-ui基本上传</p>
		<el-upload
				:before-remove="beforeRemove"
				:file-list="fileList"
				:on-exceed="handleExceed"
				:on-preview="handlePreview"
				:on-progress="handleProgress"
				:on-remove="handleRemove"
				action="/uploadfile"
				class="upload-demo">
			<el-button size="small" type="primary">点击上传</el-button>
		</el-upload>
	</el-card>
	<el-card class="box-card">
		<p>elment-ui头像上传</p>
		<el-upload
				:before-upload="beforeAvatarUpload"
				:on-success="handleAvatarSuccess"
				:show-file-list="false"
				action="/uploadfile"
				class="avatar-uploader">
			<img :src="imageUrl" class="avatar" v-if="imageUrl">
			<i class="el-icon-plus avatar-uploader-icon" v-else></i>
		</el-upload>
	</el-card>
</div>

<script>
    const vm = new Vue({
        el: ".vue-box",
        data: {
            fileList: [],
            imageUrl: ''
        },
        methods: {
            handleProgress(arg) {
                console.log(arg)
            },
            handlePreview(arg) {
                console.log(arg)
            },
            handleRemove(arg) {
                console.log(arg)
            },
            beforeRemove(arg) {
                console.log(arg)
            },
            handleExceed(arg) {
                console.log(arg)
            },
            normalSubmit(arg) {
                let data = new FormData($("#normalForm")[0]);
                sa.post("/uploadfile", data, function (data) {

                })
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                console.log(file.type);
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    });
</script>
</body>
</html>